<template>
  <el-dialog
    v-model="dialogVisible"
    title="并行节点配置"
    width="600px"
    :before-close="handleClose"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="节点名称">
        <el-input v-model="form.name" placeholder="请输入节点名称" />
      </el-form-item>
      
      <el-form-item label="并行规则">
        <el-select v-model="form.parallelRule" placeholder="选择并行规则">
          <el-option label="全部完成" value="all" />
          <el-option label="任一完成" value="any" />
          <el-option label="多数完成" value="majority" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="并行分支">
        <div class="branches-container">
          <div 
            v-for="(branch, index) in form.parallelBranches" 
            :key="index"
            class="branch-item"
          >
            <el-input 
              v-model="branch.name" 
              placeholder="分支名称"
              style="width: 200px; margin-right: 10px;"
            />
            <el-button 
              type="danger" 
              size="small" 
              @click="removeBranch(index)"
            >
              删除
            </el-button>
          </div>
          <el-button type="primary" size="small" @click="addBranch">
            添加分支
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  modelValue: boolean
  nodeData?: any
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  nodeData: () => ({})
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'confirm': [data: any]
}>()

const dialogVisible = ref(props.modelValue)

const form = ref({
  name: '',
  parallelRule: 'all',
  parallelBranches: [] as Array<{ name: string; steps: any[] }>
})

watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
  if (val && props.nodeData) {
    form.value = {
      name: props.nodeData.name || '',
      parallelRule: props.nodeData.parallelRule || 'all',
      parallelBranches: props.nodeData.parallelBranches || []
    }
  }
})

watch(dialogVisible, (val) => {
  emit('update:modelValue', val)
})

const addBranch = () => {
  form.value.parallelBranches.push({
    name: `分支${form.value.parallelBranches.length + 1}`,
    steps: []
  })
}

const removeBranch = (index: number) => {
  form.value.parallelBranches.splice(index, 1)
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleConfirm = () => {
  emit('confirm', form.value)
  dialogVisible.value = false
}

defineOptions({
  name: 'ParallelConfigDialog'
})
</script>

<style scoped>
.branches-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.branch-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 